<template>
  <div class="app-container">
    <div class="out-border">
      <div class="layout-title">上传文件（.xls,.xlsx）</div>
      <div class="color-main address-content">
        <div class="file-upload">
            <div class="file-upload-text">选择excel</div>
            <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="file-upload-input"  accept=".xls,.xlsx">
        </div>
        <div class="start-btn">
          <el-button type="primary" @click="submitAddDown" size="small">一键下载</el-button>
          <el-button type="primary" @click="submitAddFile" size="small">上传</el-button>
          <el-button type="primary" @click="downFile" size="small">下载</el-button>
<!--          <el-button @click="resetAdd" size="small">全部删除</el-button>-->
        </div>
        <div class="add-file-list">
          <ul>
            <li v-for="(item, index) in addArr" :key="index"><a >{{item.name}}</a></li>
          </ul>
        </div>
        <div class="upload-tips">
            <div v-text="tableSize"></div>
        </div>
      </div>
    </div>
<div class="table-container">
    <el-table ref="excelTable"
              :data="tableData"
              style="width:100%;"
              :stripe="true"
              :max-height="768"
              :default-sort="{prop: 'SlideNo', order:'ascending'}"
              @sort-change="sortChange"
              v-loading="listLoading"
              border>
      <el-table-column label="序号" align="center" width="80" sortable :show-overflow-tooltip="true">
      <template slot-scope="scope">{{scope.row.xh}}</template>
    </el-table-column>
      <af-table-column label="资产名称"  align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.zcname}}</template>
      </af-table-column>
      <af-table-column label="资产编号" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.zcbianhao}}</template>
      </af-table-column>
      <af-table-column label="账套" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.zhangtao}}</template>
      </af-table-column>
      <af-table-column label="卡片编号" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.kpnumber}}</template>
      </af-table-column>
      <af-table-column label="资产编号" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.zcnumber}}</template>
      </af-table-column>
      <af-table-column label="部门1" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.bumen1}}</template>
      </af-table-column>
      <af-table-column label="部门2" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.bumen2}}</template>
      </af-table-column>
      <af-table-column label="人员" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.user}}</template>
      </af-table-column>
      <af-table-column label="资产状态" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.zcstate}}</template>
      </af-table-column>
      <af-table-column label="存放位置" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.cfaddress}}</template>
      </af-table-column>
      <el-table-column label="备注" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.beizhu}}</template>
      </el-table-column>
      <el-table-column label="规格/型号" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.gexh}}</template>
      </el-table-column>
      <el-table-column label="价格" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.jiage}}</template>
      </el-table-column>
      <el-table-column label="其他备注" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.remark}}</template>
      </el-table-column>
      <el-table-column label="sheet" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{scope.row.sheetname}}</template>
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
import home from '../../utils/home.js'
export default {
  ...home
}
</script>

<style scoped>
  .app-container {
    /*margin-top: 10px;*/
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
  }

  .address-layout {
  }

  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }
  .mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
  }
  .address-content{
    padding: 20px;
    font-size: 18px
  }
  .file-upload {
    width: 70px;
    height: 26px;
    position: relative;
    overflow: hidden;
    border: 1px solid #0F996B ;
    display: block;
    border-radius: 4px;
    font-size: 12px;
    color: #0F996B;
    text-align: center;
    line-height: 26px;
    float: left;
    margin: 5px 0 auto auto;
  }
  .file-upload-input {
    background-color: transparent;
    position: absolute;
    width: 999px;
    height: 999px;
    top: -10px;
    right: -10px;
    cursor: pointer;
  }
  .start-btn{
    float: right;
    margin-right:40px;
  }
  .add-file-list{
    font-size:14px;
    display:block;
    clear: both;
    margin-left:  -20px;
    padding-top: 1px;


  }
  .upload-tips{
    font-size:16px;
    display:block;
    clear: both;
    padding-top: 1px;
    color:crimson;
  }
</style>
